<template>
  <div>
    <h2 style="color: #8c939d;padding-right: 1320px">银行管理</h2><hr>
    <div style="">
      <el-form :inline="true" :model="sysClient" class="demo-form-inline">
        <el-form-item label="客户/银行名称">
          <el-input v-model="sysClient.xname" placeholder="审批人"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="sysClient.sex" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="clientList">查询</el-button>
          <el-button type="primary" @click="openAddClient">新增</el-button>
          <el-button type="primary" @click="batchDelete">批删</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table
          @selection-change="handleSelectionChange"
          :data="tableData"
          style="width: 100%;color: palevioletred"
          :row-class-name="tableRowClassName">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="id"
            label="ID"
            width="80">
        </el-table-column>
        <el-table-column
            prop="name"
            label="客户姓名"
            width="150">
        </el-table-column>
        <el-table-column
            prop="sex"
            label="性别"
            width="100">
        </el-table-column>
        <el-table-column
            prop="birthDate"
            label="出生日期"
            width="200">
        </el-table-column>
        <el-table-column
            prop="idCard"
            label="身份证"
            width="220">
        </el-table-column>
        <el-table-column
            prop="img"
            label="头像"
            width="220">
          <template v-slot="scope">
            <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.img"
                :fit="fit"></el-image>
          </template>
        </el-table-column>
        <el-table-column
            prop="bankNames"
            label="发卡银行">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="success"
                @click="handDetails(scope.row.id)">查看</el-button>
            <el-button
                size="mini"
                type="warning"
                @click="openHandlupdate(scope.row)">编辑</el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
<!--    分页-->
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="sysClient.pageNum"
          :page-sizes="pageSizes"
          :page-size="sysClient.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
<!--  详情表单  -->
    <el-drawer
        title="详情信息"
        :visible.sync="drawer"
        :direction="direction"
        :before-close="handleClose">
      <div v-model="sysClient" class="panda1">
        <el-descriptions title="客户详情">
          <el-descriptions-item label="客户名称">{{sysClient.name}}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions>
          <el-descriptions-item label="性别">{{sysClient.sex}}</el-descriptions-item><br>
        </el-descriptions>
        <el-descriptions>
          <el-descriptions-item label="出生日期">{{sysClient.birthDate}}</el-descriptions-item><br>
        </el-descriptions>
        <el-descriptions>
          <el-descriptions-item label="身份证">
            <el-tag size="small">{{sysClient.idCard}}</el-tag>
          </el-descriptions-item><br>
        </el-descriptions>
        <el-descriptions>
          <el-descriptions-item label="发卡银行">{{sysClient.bankNames}}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-drawer>
<!-- 新增客户嵌套表单   -->
    <div>
      <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="客户名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-select v-model="form.sex" placeholder="请选择性别">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出生日期" :label-width="formLabelWidth">
            <el-date-picker
                v-model="form.birthDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="身份证" :label-width="formLabelWidth">
            <el-input v-model="form.idCard" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="身份证" :label-width="formLabelWidth">
            <el-upload
                class="avatar-uploader"
                :action="action"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
              <img v-if="form.img" :src="form.img" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="银行" :label-width="formLabelWidth">
            <el-checkbox v-for="(o,index) in blankData" @change="aa" :label="o.id" v-model="blankId">{{o.name}}</el-checkbox>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addClient">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "BlankView",
  data(){
    return{
      sysClient:{
        pageNum:1,
        pageSize:3
      },
      total:0,
      pageSizes:[1, 2, 3, 4],
      tableData:[],
      fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      drawer: false,
      formLabelWidth:'120px',
      dialogFormVisible:false,
      form:{
        img:'',
        blankIds:[]
      },
      action:'http://172.20.10.5:8003/api/sys-client/upload/',
      blankData:[],
      blankId:[],
      clientIds:[]
    }
  },methods:{
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },/*客户列表*/
    clientList(){
      this.axios.post("http://172.20.10.5:8003/api/sys-client/clientList",this.sysClient).then(res=>{
        console.log("ssssss======"+JSON.stringify(res.data))
        this.tableData=res.data.list;
        this.sysClient.pageSize=res.data.pageSize;
        this.sysClient.pageNum=res.data.pageNum;
        this.total=res.data.total
      })
    },handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.sysClient.pageSize=val;
      this.clientList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.sysClient.pageNum=val;
      this.clientList();
    },/*打开详情列表*/
    handDetails(id){
      //alert(id)
      this.drawer=true
      this.axios.post("http://172.20.10.5:8003/api/sys-client/clientDetails?id="+id).then(res=>{
        this.sysClient=res.data
      })
    },/*打开新增客户嵌套表*/
    openAddClient(){
      this.form={};
      this.blankId=[]
      this.dialogFormVisible=true;
      this.blankList()
    },handleAvatarSuccess(res) {
      //alert(res)
      this.form.img=res
      //alert(this.form.img)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },/*银行列表*/
    blankList(){
      this.axios.post("http://172.20.10.5:8003/api/sys-client/blankList").then(res=>{
        console.log("ccccc==="+res.data)
        this.blankData=res.data
      })
    },aa(){
      this.form.blankIds=this.blankId;
      //this.form.blankIds=[]
    },addClient(){
      console.log(this.form);
      if(this.form.id==null){
        this.axios.post("http://172.20.10.5:8003/api/sys-client/addClient",this.form).then(res=>{
          if(res.data=='success'){
            this.$message.success("添加成功!!!");
            this.dialogFormVisible=false
          }
        })
      }else{
        //alert("修改")
        this.axios.post("http://172.20.10.5:8003/api/sys-client/updateClient",this.form).then(res=>{
          if(res.data=='success'){
            this.$message.success("修改成功!!!");
            this.dialogFormVisible=false
          }
        })
      }


    },openHandlupdate(row){
      this.dialogFormVisible=true;
      this.axios.post("http://172.20.10.5:8003/api/sys-client/clientDetails?id="+row.id).then(res=>{
        this.form=res.data
      })
      //alert(row.id)
      this.getBlankIdsByClientId(row.id)
      this.blankList()
    },getBlankIdsByClientId(id){
        this.axios.post("http://172.20.10.5:8003/api/sys-client/getBlankIdsByClientId?id="+id).then(res=>{
          console.log(res.data)
          this.blankId=res.data
        })
    },/*根据id去删除*/
    handleDelete(id){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.post("http://172.20.10.5:8003/api/sys-client/deleteClient?id="+id).then(res=>{
          console.log(res.data)
          if(res.data=="success"){
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.clientList()
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },handleSelectionChange(val) {
      this.multipleSelection = val;
      this.clientIds=[]
      this.multipleSelection.forEach(item=>{
        //alert(item.id)
        this.clientIds.push(item.id)
      })
    },/*批删*/
    batchDelete(){
      //alert(this.clientIds)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.post("http://172.20.10.5:8003/api/sys-client/batchDelete?clientIds="+this.clientIds).then(res=>{
          if(res.data=="success"){
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.clientList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },created() {
    this.clientList();
    this.tableRowClassName()
  }
}
</script>

<style scoped>
.el-table .warning-row {
  background: red;
}

.el-table-column{
  background: red;
}

.panda1 {
  width: 530px; /* 设置div的宽度 */
  height: 930px; /* 设置div的高度 */
  background-image: url('/Users/zhaowenting/Pictures/WechatIMG1.jpg'); /* 小熊图片的路径 */
  background-size: cover; /* 背景图片覆盖整个div区域 */
  background-position: center; /* 背景图片居中显示 */
  background-repeat: no-repeat; /* 背景图片不重复 */
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>